<template>
  <el-dialog
    :title="`${title}管理员`"
    :visible.sync="dialogShow"
    width="40%"
    @close="btnCancel"
  >
    <el-form
      label-width="80px"
      size="normal"
      ref="form"
      :rules="formRules"
      :model="formData"
    >
      <el-row type="flex">
        <el-form-item
          label="管理员名称"
          label-width="100px"
          size="small"
          prop="username"
        >
          <el-input
            v-model="formData.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="管理员邮箱"
          label-width="150px"
          size="small"
          prop="email"
        >
          <el-input
            placeholder="请输入邮箱"
            v-model="formData.email"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-form-item
          label="管理员密码"
          label-width="100px"
          size="small"
          prop="password"
        >
          <el-input
            v-model="formData.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="管理员手机"
          label-width="150px"
          size="small"
          prop="phone"
        >
          <el-input
            placeholder="请输入手机号"
            v-model="formData.phone"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-form-item
          label="管理员状态"
          prop="status"
          label-width="100px"
          size="small"
        >
          <el-switch
            v-model="formData.status"
            active-text="启用"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="管理员头像" label-width="220px">
          <!-- 上传 ====== -->
          <upload-image
            v-model="formData.avatar"
            ref="UploadImage"
          ></upload-image>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="管理员角色" label-width="100px" prop="roleid_list">
          <el-checkbox-group v-model="formData.roleid_list">
            <el-checkbox
              :label="item.id"
              :value="item.id"
              v-for="item in roles"
              :key="item.id"
              >{{ item.role_name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-row>
    </el-form>

    <span slot="footer">
      <el-button @click="btnCancel">取消</el-button>
      <el-button type="primary" @click="btnOk">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addUserApi, editUserApi, showUserApi, getroleList } from '../../../../api/user-admin'
import UploadImage from './upload-img.vue'
export default {
  name: 'UserPop',
  components: { UploadImage },
  data() {
    return {
      // 管理员角色
      roles: [],
      // 控制表单变量
      dialogShow: false,
      // 表单数组
      list: [],
      // 表单数据变量
      formData: {
        password: '12345222211',
        username: '常山赵子龙',
        phone: '18856568978',
        email: '188@163.com',
        status: 1,
        avatar: '',
        roleid_list: []
      },
      // 管理员角色 上传时合并
      // roleid_list: [],
      formRules: {
        password: [{ required: true, message: '请输入', trigger: 'blur' },
        { min: 6, max: 16, message: '密码长度需6-16位', trigger: 'blur' }],
        username: [{ required: true, message: '请输入', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入', trigger: 'blur' }],
        email: [{ required: true, message: '请输入', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
        roleid_list: [{ required: true, message: '请输入', trigger: 'change' },
        { type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' }]
      }
    }
  },

  //  计算属性
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  created() {
    this.getroleList()
  },
  // 方法
  methods: {
    async getroleList() {
      const res = await getroleList()
      console.log(res);
      this.roles = res.list
    },
    // 提交
    async btnOk() {
      // 1校验表单
      await this.$refs.form.validate()
      // 2加工数据
      // 3发送请求
      this.formData.id ? await editUserApi(this.formData) : await addUserApi(this.formData)
      //4 提示成功
      this.$message.success(this.formData.id ? '修改成功' : '创建成功')
      // 5关闭弹框和
      this.dialogShow = false
      //6 更新列表
      // this.initData()
      this.$emit('updateList')
      // 表单重置
      this.btnCancel()
    },
    // 取消
    async btnCancel() {
      // 表单重置
      this.formData = {
        password: '',
        username: '',
        phone: '',
        email: '',
        status: 1,
        avatar: '',
        roleid_list: []
      }
      // this.$refs.UploadImage.fileList = []
      this.dialogShow = false
      // 需要延迟才能解除校验
      setTimeout(() => {
        this.$refs.form.clearValidate()
      }, 300);

    },
    // 回显
    async showdirectory(id) {
      // console.log(id);
      const res = await showUserApi(id)
      console.log(res);
      this.formData = res
      this.dialogShow = true

    },

  }
}
</script>

<style>
</style>